// 当 DOM 完全加载后执行函数
document.addEventListener('DOMContentLoaded', function() {
    // 获取商品列表的容器
    const listContainer = document.querySelector('.list.container');
    // 获取当前页输入框
    const currentPageInput = document.querySelector('.pagination .jump');
    // 获取每页显示数量的选择框
    const pageSizeSelect = document.querySelector('.pagination .pagesize');
    // 获取总页数的元素
    const totalPageElement = document.querySelector('.pagination .total');
    // 获取搜索输入框
    const searchInput = document.querySelector('.filter .search');
    // 获取分类容器
    const categoryContainer = document.querySelector('.category');
    // 获取筛选框
    const filterBox = document.querySelector('.filterBox');
    // 获取折扣框
    const saleBox = document.querySelector('.saleBox');
    // 获取排序框
    const sortBox = document.querySelector('.sortBox');

    // 获取分页按钮
    const firstButton = document.querySelector('.pagination .first');
    const prevButton = document.querySelector('.pagination .prev');
    const nextButton = document.querySelector('.pagination .next');
    const lastButton = document.querySelector('.pagination .last');

    // 初始化分页和筛选参数
    let currentPage = 1;
    let pageSize = 12;
    let searchQuery = '';
    let filterType = '';
    let saleType = 10;
    let sortType = 'id';
    let sortMethod = 'ASC';
    let category = '';
    let total = 0;

    // 异步获取商品数据的函数
    async function fetchGoods() {
        try {
            // 设置请求参数
            const params = {
                current: currentPage,
                pagesize: pageSize,
                search: searchQuery,
                filter: filterType || undefined,
                saleType: saleType,
                sortType: sortType,
                sortMethod: sortMethod,
                category: category || undefined
            };

            // 发送 GET 请求获取商品数据
            const response = await axios.get('http://localhost:9000/goods/list', { params });
            console.log(response.data);  // 打印返回的数据
            if (response.data.code === 1) {
                // 渲染商品和分页数据
                renderGoods(response.data.list);
                renderPagination(response.data.total);
                total = response.data.total;
            } else {
                console.error('无法获取商品数据');
            }
        } catch (error) {
            console.error('错误报告', error);
        }
    }

    // 异步获取商品分类数据的函数
    async function fetchCategories() {
        try {
            // 发送 GET 请求获取分类数据
            const response = await axios.get('http://localhost:9000/goods/category');
            if (response.data.code === 1) {
                let categories = response.data.list;
                // 将“其他”分类移到最后
                const otherIndex = categories.indexOf('其他');
                if (otherIndex > -1) {
                    categories.push(categories.splice(otherIndex, 1)[0]);
                }
                // 渲染分类数据
                renderCategories(categories);
            } else {
                console.error('无法获取数据');
            }
        } catch (error) {
            console.error('错误报告', error);
        }
    }

    // 渲染分类数据的函数
    function renderCategories(categories) {
        // 初始化分类列表，添加“全部”选项
        categoryContainer.innerHTML = '<li class="active" data-type="">全部</li>';
        // 遍历分类数据，创建分类项
        categories.forEach(category => {
            const categoryItem = document.createElement('li');
            categoryItem.dataset.type = category;
            categoryItem.textContent = category;
            categoryContainer.appendChild(categoryItem);
        });

        // 给每个分类项添加点击事件
        document.querySelectorAll('.category li').forEach(categoryItem => {
            categoryItem.addEventListener('click', ({ target }) => {
                if (target.nodeName === 'LI') {
                    // 移除其他分类项的 active 类，给当前点击的分类项添加 active 类
                    document.querySelectorAll('.category li').forEach(li => li.classList.remove('active'));
                    target.classList.add('active');
                    // 更新分类参数和当前页，重新获取商品数据
                    category = target.dataset.type;
                    currentPage = 1;
                    fetchGoods();
                }
            });
        });
    }

    // 渲染商品数据的函数
    function renderGoods(goodsList) {
        // 清空商品列表容器
        listContainer.innerHTML = '';

        // 如果没有商品，显示“没有找到相关商品”的图片
        if (goodsList.length === 0) {
            listContainer.innerHTML = '<img src="../img/nothing.jpg" alt="没有找到相关商品" style="width: 100%;">';
            return;
        }

        // 遍历商品数据，创建商品项
        goodsList.forEach(goods => {
            const goodsItem = document.createElement('li');
            goodsItem.dataset.id = goods.goods_id;

            goodsItem.innerHTML = `
                <div class="show">
                    <img src="${goods.img_big_logo}" alt="${goods.title}">
                    ${goods.is_hot ? '<span class="hot">热销</span>' : ''}
                    ${goods.is_sale ? '<span class="sale">折扣</span>' : ''}
                </div>
                <div class="info">
                    <p class="title">${goods.title}</p>
                    <p class="price">
                        <span class="curr">¥ ${goods.current_price}</span>
                        <span class="old">¥ ${goods.price}</span>
                    </p>
                </div>
            `;

            // 点击商品项跳转到详情页
            goodsItem.addEventListener('click', () => {
                window.location.href = `detail.html?id=${goods.goods_id}`;
            });

            // 将商品项添加到列表容器中
            listContainer.appendChild(goodsItem);
        });
    }

    // 渲染分页数据的函数
    function renderPagination(total) {
        // 使用返回的 total 值作为总页数
        const totalPages = total;
        // 更新总页数显示
        totalPageElement.textContent = `${currentPage} / ${totalPages}`;

        // 检查并启用/禁用分页按钮
        if (currentPage === 1) {
            firstButton.classList.add('disable');
            prevButton.classList.add('disable');
        } else {
            firstButton.classList.remove('disable');
            prevButton.classList.remove('disable');
        }

        if (currentPage === totalPages) {
            nextButton.classList.add('disable');
            lastButton.classList.add('disable');
        } else {
            nextButton.classList.remove('disable');
            lastButton.classList.remove('disable');
        }
    }

    // 热销/折扣筛选点击事件
    filterBox.addEventListener('click', ({ target }) => {
        if (target.nodeName === 'LI') {
            // 移除其他筛选项的 active 类，给当前点击的筛选项添加 active 类
            document.querySelectorAll('.filterBox li').forEach(li => li.classList.remove('active'));
            target.classList.add('active');
            // 更新筛选参数和当前页，重新获取商品数据
            filterType = target.dataset.type;
            currentPage = 1;
            fetchGoods();
        }
    });

    // 折扣筛选点击事件
    saleBox.addEventListener('click', ({ target }) => {
        if (target.nodeName === 'LI') {
            // 移除其他折扣项的 active 类，给当前点击的折扣项添加 active 类
            document.querySelectorAll('.saleBox li').forEach(li => li.classList.remove('active'));
            target.classList.add('active');
            // 更新折扣参数和当前页，重新获取商品数据
            saleType = target.dataset.type;
            currentPage = 1;
            fetchGoods();
        }
    });

    // 排序筛选点击事件
    sortBox.addEventListener('click', ({ target }) => {
        if (target.nodeName === 'LI') {
            // 移除其他排序项的 active 类，给当前点击的排序项添加 active 类
            document.querySelectorAll('.sortBox li').forEach(li => li.classList.remove('active'));
            target.classList.add('active');
            // 更新排序参数和当前页，重新获取商品数据
            sortType = target.dataset.type;
            sortMethod = target.dataset.method;
            currentPage = 1;
            fetchGoods();
        }
    });

    // 每页显示数量选择事件
    pageSizeSelect.addEventListener('change', () => {
        // 更新每页显示数量和当前页，重新获取商品数据
        pageSize = parseInt(pageSizeSelect.value, 10);
        currentPage = 1;
        fetchGoods();
    });

    // 当前页输入框改变事件
    currentPageInput.addEventListener('change', () => {
        // 更新当前页，重新获取商品数据
        currentPage = parseInt(currentPageInput.value, 10);
        fetchGoods();
    });

    // 搜索输入框输入事件
    searchInput.addEventListener('input', () => {
        // 更新搜索查询参数和当前页，重新获取商品数据
        searchQuery = searchInput.value;
        currentPage = 1;
        fetchGoods();
    });

    // 首页按钮点击事件
    firstButton.addEventListener('click', () => {
        // 更新当前页为第一页，重新获取商品数据
        currentPage = 1;
        fetchGoods();
    });

    // 上一页按钮点击事件
    prevButton.addEventListener('click', () => {
        // 如果当前页大于 1，更新当前页，重新获取商品数据
        if (currentPage > 1) {
            currentPage--;
            fetchGoods();
        }
    });

    // 下一页按钮点击事件
    nextButton.addEventListener('click', () => {
        // 使用返回的 total 值作为总页数
        const totalPages = total;
        // 如果当前页小于总页数，更新当前页，重新获取商品数据
        if (currentPage < totalPages) {
            currentPage++;
            fetchGoods();
        }
    });

    // 末页按钮点击事件
    lastButton.addEventListener('click', () => {
        // 使用返回的 total 值作为总页数，更新当前页为末页，重新获取商品数据
        const totalPages = total;
        currentPage = totalPages;
        fetchGoods();
    });

    // 初始加载分类和商品数据
    fetchCategories();
    fetchGoods();
});
